<template>
  <div class="content">
    <div @click="isrule = true">kljkdlfjk</div>
    <van-popup class="rule_mark"  v-model="isrule" position="bottom">
      <div class="rulebox">
        <div class="r_top">
          <img src="../../assets/close.png" alt="">
        </div>
        <div class="r_conten">
          <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <div class="rcbox" v-for="(hitem, hidx) in helpData" :key="hidx">
            <div class="rcb_l">
              <img :src="hitem.headimgurl" alt="">
              <div class="rcb_text">
                <div>{{hitem.username}}</div>
                <div class="times">{{hitem.dateline}}</div>
              </div>
            </div>
            <div class="rcb_r">{{hitem.cut_money}}</div>
          </div>
          </mescroll-vue>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { helpList } from '@/api/public'
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  name: 'Write',
  components: { MescrollVue },
  data () {
    return {
      isrule: false,
      datamsg: {},
      page: 1,
      id: 1,
      helpData: [],
      listData: [],
      mescroll: null,
      mescrollDown: {},
      mescrollUp: {
        callback: this.upCallback,
        dataList: []
      }
    }
  },
  created () {
    // this.gethelpdata()
    // if (this.pervalue > 60) {
    //   this.nums = this.pervalue * 1.32
    // } else if (this.pervalue > 40) {
    //   this.nums = this.pervalue * 0.7
    // } else {
    //   this.nums = 0
    // }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
    next()
  },
  methods: {
    upCallback (page, mescroll) {
      const { num } = page
      const { id } = this
      helpList(num, id).then(res => {
        const { list } = res
        if (num === 1) this.helpData = []
        this.helpData = this.helpData.concat(list)
        this.$nextTick(() => {
          mescroll.endSuccess(list.length)
        })
      }).catch(() => {
        mescroll.endErr()
      })
    },
    mescrollInit (mescroll) {
      this.mescroll = mescroll
    }
  }
}
</script>

<style scoped lang="less">
.content{
  width: 100%;
  min-height: 100vh;
  background-color: white;
  box-sizing: border-box;
  text-align: center;
   // 排行
  .rule_mark{
    width: 100%;
    height: 1000px;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    box-sizing: border-box;
    .rulebox{
      padding:20px 20px 0;
      background-color: white;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .r_top{
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .r_conten{
        width: 100%;
        background-color: white;
        flex: 1;
        overflow: scroll;
        .rcbox{
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 97px;
          padding-bottom: 20px;
          border-bottom: 1px solid #efefef;
          box-sizing: border-box;
          .rcb_l{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            img{
              width: 76px;
              height: 76px;
              border-radius: 50%;
              background-size: cover;
              object-fit: cover;
            }
            .rcb_text{
              text-align: left;
              margin-left: 20px;
              color: #222222;
              font-size: 28px;
              .times{
                margin-top: 10px;
                font-size: 22px;
                color: #666666;
              }
            }
          }
          .rcb_r{
            font-size: 28px;
            font-weight: bold;
            color: #ff3730;
          }
        }
      }
    }
  }
}
</style>
